<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>axios</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<input id="get" type="button" value="get请求">
<input id="post" type="button" value="post请求">
<input id="put" type="button" value="put请求">
<input id="delete" type="button" value="delete请求"><br>
<label>
    <select name="method" id="method">
        <option value="GET">GET</option>
        <option value="POST">POST</option>
        <option value="PUT">PUT</option>
        <option value="DELETE">DELETE</option>
    </select>
    <button onclick="sendRequest()">发送请求</button>
</label>
<script>
    document.getElementById('get').onclick = function () {
        console.log('get请求');
        axios.get('http://localhost:8080?num=3').then(function (response) {
            console.log(response);
        }, function (error) {
            console.log(error);
        })
    }
    document.getElementById('post').onclick = function () {
        console.log('post请求');
        axios.post('http://localhost:8080', {username: 'user'}).then(function (response) {
            console.log(response);
        }, function (error) {
            console.log(error);
        })
    }
    document.getElementById('put').onclick = function () {
        console.log('put请求');
        axios.put('http://localhost:8080', {username: 'user'}).then(function (response) {
            console.log(response);
        }, function (error) {
            console.log(error);
        })
    }
    document.getElementById('delete').onclick = function () {
        console.log('delete请求');
        axios.delete('http://localhost:8080', {username: 'user'}).then(function (response) {
            console.log(response);
        }, function (error) {
            console.log(error);
        })
    }
    function sendRequest() {
        let method = document.getElementById('method').value;
        axios({
            method: method,
            url: 'http://localhost:8080',
            data: {
                username: 'user'
            }
        }).then((result)=>{
            console.log(result);
        }).catch((error)=>{
            console.log(error);
        })
    }
</script>
</body>
</html>